<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<!--  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
  <link rel="stylesheet" href="./resoures/element-ui/index.css">
<!--  <link type="text/css" rel="stylesheet" href="../css/classifcation.css">-->
  <link type="text/css" rel="stylesheet" href="./css/classifcation.css">
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue@2/dist/vue.js"></script> -->
  <!-- //引入vue.js -->
<!--  <script src="../resoures/vue.js"></script>-->
  <script src="./resoures/vue.js"></script>
  <!-- import JavaScript -->
<!--  <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
  <script src="./resoures/element-ui/index.js"></script>
  <!-- 引入axios -->
<!--  <script src="../resoures/axios.min.js"></script>-->
  <script src="./resoures/axios.min.js"></script>
  <!-- 引入vue路由 -->
<!--  <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>-->
</head>
<body>
  <div id="app">
    <div class="indexHead" >

      <div class="catalogueLogo">
        <img src="./img/logo.png" height="70px">

      </div>
      <div class="title">
        网上书城
      </div>
      <div class="indexHeadText">
        <a href="/index.html" class="indexHeadTextA">首页</a>
        <a href="/classifcation.html" class="indexHeadTextA" style="color: red;">图书分类 </a>
        <a href="/page/register.html" class="indexHeadTextA" v-if="!login">免费注册</a>
        <a href="/page/login.html" class="indexHeadTextA" v-if="!login">请先登录</a>
        <a href="/shoping.html" class="indexHeadTextA" v-if="login">购物车</a>
        <a href="/order.html" class="indexHeadTextA" v-if="login">我的订单</a>
        <a href="/page/login.html" class="indexHeadTextA" v-if="login" @click="quit">退出</a>
      </div>
    </div>
    <hr style="margin-top: 40px;">
    <div class="calsslable">
<!--      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">-->
<!--        <el-tab-pane label="艺术" name="first"></el-tab-pane>-->
<!--        <el-tab-pane label="哲学宗教" name="zero"></el-tab-pane>-->
<!--        <el-tab-pane label="小说" name="second"></el-tab-pane>-->
<!--        <el-tab-pane label="文学" name="third"></el-tab-pane>-->
<!--        <el-tab-pane label="成功励志" name="fourth"></el-tab-pane>-->
<!--        <el-tab-pane label="科技" name="five"></el-tab-pane>-->
<!--        <el-tab-pane label="管理学" name="six"></el-tab-pane>-->
<!--        <el-tab-pane label="历史" name="seven"></el-tab-pane>-->
<!--        <el-tab-pane label="言情" name="eign"></el-tab-pane>-->
<!--        <el-tab-pane label="课本" name="nine"></el-tab-pane>-->
<!--        <el-tab-pane label="自然科学" name="ten"></el-tab-pane>-->
<!--        <el-tab-pane label="综合类图书" name="eleven"></el-tab-pane>-->
<!--      </el-tabs>-->
      <el-tabs v-model="activeTab" type="card" @tab-click="handleClick">
        <el-tab-pane
                v-for="tab in categoryList"

                :label="tab.name"
                :name="tab.name"
        ></el-tab-pane>
      </el-tabs>
      <div class="calsslableContent">
       
        <div class="calsslableContentChirld" v-for="v in bookList" :key="v.id">
          <div class="image" >
            <img :src="v.imageName" alt="" width="80%" height="80%">
          </div>
          <div class="content">
            <div class="name" >
              {{v.name}}
            </div>
            <div class="description">
              {{v.description}}
            </div>
            <div class="author">
              {{v.author}}   /  {{v.publisher}}
            </div>
            <div class="price">
              <p style="color: red; font-size: 24px; margin-right: 20px;">￥{{v.price}}</p>
              <el-button type="danger" @click="addshoping(v.id)">添加购物车</el-button>
              <el-button type="danger" @click="buy">购买</el-button>
              </div>
            </div>
          </div>
        </div>
         <div class="pager" style="display: flex;">
           <el-pagination
                   ref="pagination"
                   background
                   layout="prev, pager, next"
                   :total="total"
                   :current-page="currentPage"
                   :page-size="pageSize"
                   @current-change="handleCurrentChange">
           </el-pagination>
         </div>
      </div>
    </div>
    
  </body>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        activeTab:'',
        currentPage:1,
        activeName: 'first',
        tablename :'哲学宗教',
        total:0,
        currentPage:1,
        bookList:[
          { id:'',
            name:'',
            imagename:'',
            description:'',
            publisher:'',
            author:'',
            price:Number,
          },
        ],
        login:false,
        login_username:'',
        categoryList:[],
        pageSize:10,
      },
      methods:{
        //判断登录状态
        checkLogin(){
          let token = sessionStorage.getItem("Linusername");
          return token !== null && token !== undefined;
        },
        //退出登录状态的事件
        quit(event){
          event.preventDefault();
          // 执行自定义逻辑
          alert("退出成功！")
          sessionStorage.removeItem("Linusername");
          location.href ="/index";
        },
        searchcategory(){
          _this = this;
          // 发起 GET 请求，并传入用户名称参数
          axios.get("http://localhost:8081/admincategoryList", {
            params: {
              currentPage: 1,
              pageSize: 20
            }
          }).then(function (response) {
            // 请求成功处理
            _this.categoryList = response.data.categoryList;
            console.log(_this.categoryList)
          }).catch(function (error) {
            // 请求失败处理
            alert(error);
          });
        },
        handleClick(tab) {
          let  _this = this;
          this.currentPage = 1;
          console.log("当前页数："+this.currentPage)
          this.tablename = tab.label;
          console.log(this.tablename);
          axios.get("http://localhost:8081/searchclass2",{
            params: {  
              bookType: _this.tablename,
              currentPage: _this.currentPage  ,
              pageSize:10
            }  
            }).then(function (resp) {
              if(resp.data.name === '无'){
                alert('暂无该种图书');
                _this.tablename = '哲学宗教'
              }else{
                _this.bookList = resp.data.booklist
                _this.total =resp.data.size
                console.log(_this.bookList)
              }
          });
        },
        handleSizeChange(val) {  
          // 当每页显示条目个数变化时会触发
          console.log('每页显示条目个数改变:', val);
          let _this = this;
          this.currentPage = val
          axios.get("http://localhost:8081/searchclass2",{
            params: {
              bookType: _this.tablename,
              currentPage: _this.currentPage  ,
              pageSize:10
            }
          }).then(function (resp) {
            if(resp.data.name === '无'){
              alert('暂无该种图书')
            }else{
              _this.bookList = resp.data.booklist
              _this.total =resp.data.size
              console.log(_this.bookList)
            }
          });
        },
        searchBookList(){
          let _this = this;
          this.currentPage = 1;
          console.log("当前页数："+this.currentPage)
          axios.get("http://localhost:8081/searchclass2",{
            params: {
              bookType: _this.tablename,
              currentPage: _this.currentPage  ,
              pageSize:10
            }
          }).then(function (resp) {
            if(resp.data.name === '无'){
              alert('暂无该种图书')
            }else{
              _this.bookList = resp.data.booklist
              _this.total =resp.data.size
              console.log(_this.bookList)
            }
          });
        },
        handleCurrentChange(val) {  
          // 当前页码改变时会触发
          console.log('当前页码改变:', val);
          console.log('当前类别为：'+this.tablename)
          this.currentPage = val
          let _this = this;
          axios.get("http://localhost:8081/searchclass2",{
            params: {
              bookType: _this.tablename,
              currentPage: _this.currentPage  ,
              pageSize:10
            }
          }).then(function (resp) {
            if(resp.data.name === '无'){
              alert('暂无该种图书')
            }else{
              _this.bookList = resp.data.booklist
              _this.total = resp.data.size
              console.log(_this.bookList)
            }
          });
        } ,
        fetchData() {
          //判断登陆状态 首先获取名为"Linusername"的会话存储数据
          if (this.checkLogin()){
            this.login = true
            this.login_username = sessionStorage.getItem("Linusername")
          }
        },
        open1() {
          this.$notify({
            title: '成功',
            message: '已添加到购物车',
            type: 'success'
          });
        },
        //购物车方法()
        addshoping(id){
          if (this.checkLogin()){
            //登录后的操作
            //登录后的操作
            let _this = this;
            axios({
              method: "GET",
              url: "/addshoping",
              params: {
                id: id,
                username:_this.login_username
              }
            }).then(res => {
              // 判断响应中的 code 值是否为 1
              if (res.data.code === 1) {
                // 操作成功，进行相应的处理
                _this.open1();
              } else {
                // 操作失败，进行相应的处理
                alert("失败")
              }
            })
          }else {
            //未登录的提示
            // 未登录时显示警告框
            this.$alert('您还未登录，请先登录', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                // 点击确定按钮后的回调函数，可以不写
              }
            });
          }
        },
        buy(){
          if (this.checkLogin()){
            //登录后的操作
          }else {
            //未登录的提示
            // 未登录时显示警告框
            this.$alert('您还未登录，请先登录', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                // 点击确定按钮后的回调函数，可以不写
              }
            });
          }
        }

      },
      mounted() {
      this.$nextTick(() => {  
      const pagination = this.$refs.pagination;  
      if (pagination) {
        this.fetchData();
        this.searchcategory();
        this.searchBookList();

      } else {  
        console.error('Pagination ref is not available');  
      }  
      });  
    },
      
  })
</script>
</html>